<template>
<div style="z-index:5;left: 0;top: 0;position: fixed;height: 100%;width: 100%;background-color:white">
    <div class="zhezhao"></div>
    <img src="../../../../assets/changepsw/back.png" class="img_back" @click="goback">
    <div class="div1">
        <span v-show="OldAddressdata">修改收货地址</span>
        <span v-show="!OldAddressdata">新增地址</span>
    </div>
    <div class="div2">
        <div class="div3" style="border-bottom: 0.7px solid rgb(229, 229, 229);">
            <span class="span1">收货人</span>
            <input type="text" class="input" placeholder="请输入收货人名称" v-model="name" @focus="InputFocus(0)" @blur="InputBlur">
            <img src="../../../../assets/changepsw/false.png" class="img_false" v-show="name" @click="deletename">
        </div>
        <div class="div33" :style="WhichInput==0?InputStyle[0]+MyDiv33Width:InputStyle[1]+'width:0px'"></div>
        <div class="div3" style="border-bottom: 0.7px solid rgb(229, 229, 229);">
            <span class="span1">手机号</span>
            <input type="text" class="input" placeholder="请输入收货人手机号" v-model="phone" @focus="InputFocus(1)" @blur="InputBlur">
            <img src="../../../../assets/changepsw/false.png" class="img_false" v-show="phone" @click="deletephone">
        </div>
        <div class="div33" :style="WhichInput==1?InputStyle[0]+MyDiv33Width:InputStyle[1]+'width:0px'"></div>
    </div>
    <div class="div2">
        <div class="div3" style="border-bottom: 0.7px solid rgb(229, 229, 229);">
            <span class="span1">所在地区</span>
            <input type="text" class="input" placeholder="请选择所在地区" v-model="location" readonly @click="chooseArea()">
        </div>
        <div class="div3" style="border-bottom: 0.7px solid rgb(229, 229, 229);">
            <span class="span1">详细地址</span>
            <input type="text" class="input" placeholder="请输入详细地址" v-model="address" @focus="InputFocus(2)" @blur="InputBlur">
            <img src="../../../../assets/changepsw/false.png" class="img_false" v-show="address" @click="deleteaddress">
        </div>
        <div class="div33" :style="WhichInput==2?InputStyle[0]+MyDiv33Width:InputStyle[1]+'width:0px'"></div>
    </div>
    <div class="div2">
        <div class="div4">
            <span>地址类型</span>
            <ImgCheck class="img_check" :style="CheckedStyle"></ImgCheck>
            <span class="span2" @click="changeTag(0)" 
            :style="tag==0?'box-shadow: 0px 0px 4px 0px rgb(172, 124, 255) inset;':''">家</span>
            <span class="span2" @click="changeTag(1)"
            :style="tag==1?'box-shadow: 0px 0px 4px 0px rgb(172, 124, 255) inset;':''">公司</span>
            <span class="span2" @click="changeTag(2)"
            :style="tag==2?'box-shadow: 0px 0px 4px 0px rgb(172, 124, 255) inset;':''">学校</span>
            <span class="span2" @click="changeTag(3)"
            :style="tag==3?'box-shadow: 0px 0px 4px 0px rgb(172, 124, 255) inset;':''">其他</span>
        </div>
        <div class="div4" style="border-top: 0.5px solid rgb(229, 229, 229);">
            <span>设为默认地址</span>
            <span class="span3" @click="changeDefault"
            :style="isDefault?'border: 1px solid rgb(201, 169, 255);background-color: rgb(201, 169, 255);':''"></span>
            <span class="span4" @click="changeDefault"
            :style="isDefault?'border: 1px solid rgb(201, 169, 255);background-color: white;':''"></span>
        </div>
    </div>
    <div class="div5">
        <ImgSafty class="img_safty"></ImgSafty>
        <span>为便于向您交付商品或服务，您需提供收货人名称、收货地址、收货人号码，即使您不提供，我们也暂时无法为您提供配送服务。</span>
    </div>
    <div class="div6" :style="resizeStyle">
        <div class="div7" 
        @click="next"
        :style="BtnStyle.name&&BtnStyle.phone&&BtnStyle.location&&BtnStyle.address&&BtnStyle.tag?'background-color: rgb(206, 171, 255);':''">
            确定</div>
    </div>
    <ChooseAreaShow/>
</div>
</template>

<script>
import ImgCheck from './img/img_check.vue'
import ImgSafty from './img/img_safty.vue'
import ChooseAreaShow from './ChooseAreaShow.vue'
export default {
    name:'editAddress',
    components:{ImgCheck,ImgSafty,ChooseAreaShow},
    data(){
        return{
            OldAddressdata:[{'aid':''}],
            name:'',
            phone:'',
            provinceName:'',
            cityName:'',
            areaName:'',
            address:'',
            isDefault:'',
            location:'',
            tag:99,
            CheckedStyle:'display:none',
            BtnStyle:{'name':0,'phone':0,'location':0,'address':0,'tag':0},
            resizeStyle:'',
            phoneHeight:99,
            tagName:'',
            WhichInput:99,
            InputStyle:['border-bottom: 0.7px solid rgb(198, 101, 255);','border-bottom: 0.7px solid rgb(229, 229, 229);'],
            MyDiv33Width:'',
        }
    },
    methods:{
        goback(){this.$router.replace({name:'addressShow'})},
        deletename(){this.name=''},
        deletephone(){this.phone=''},
        deleteaddress(){this.address=''},
        changeTag(index){
            switch (index) {
                case 0:
                    this.tag=0
                    this.CheckedStyle='margin-left: 24.4px;'
                    break;
                case 1:
                    this.tag=1
                    this.CheckedStyle='margin-left: 87.2px;'
                    break;
                case 2:
                    this.tag=2
                    this.CheckedStyle='margin-left: 150.2px;'
                    break;
                case 3:
                    this.tag=3
                    this.CheckedStyle='margin-left: 213.2px;'
                    break;
                default:
                    break;
            }
        },
        changeDefault(){
            this.isDefault=!this.isDefault
        },
        chooseArea(){
            this.$bus.$emit('chooseAreaShow',1)
        },
        next(){
            if(this.address.length > 25){
                this.$notify({
                    title: '很遗憾',
                    message: '详细地址过长，请重新输入',
                    type: 'error'
                });
            }else{
                if(this.OldAddressdata.aid){
                    if(this.BtnStyle.name&&this.BtnStyle.phone&&this.BtnStyle.location&&this.BtnStyle.address&&this.BtnStyle.tag){
                        this.$addr.get(`address/${this.OldAddressdata.aid}/add_modify`,{
                            params:{
                                name:this.name,
                                phone:this.phone,
                                provinceName:this.provinceName,
                                cityName:this.cityName,
                                areaName:this.areaName,
                                address:this.location+this.address,
                                tag:this.tagName
                            }
                        }).then(
                            response=>{
                                console.log('修改地址请求成功',response.data);
                                if(response.data.state==200){
                                    if(this.isDefault){
                                        this.$addr.get(`address/${this.OldAddressdata.aid}/set_default`).then(
                                            response=>{
                                                console.log('设为默认地址请求成功',response.data);
                                                this.$router.push({name:'addressShow'})
                                                this.$notify({
                                                    title: '恭喜您',
                                                    message: '成功修改收货地址',
                                                    type: 'success'
                                                });
                                            },
                                            error=>{
                                                this.$message({
                                                    message:'设为默认地址请求失败，请重新登陆',
                                                    type:'error'
                                                })
                                                console.log("设为默认地址请求失败",error.message);
                                            }
                                        )
                                    }else{
                                        this.$router.push({name:'addressShow'})
                                        this.$notify({
                                            title: '恭喜您',
                                            message: '成功修改收货地址',
                                            type: 'success'
                                        });
                                    }
                                }
                            },
                            error=>{
                                this.$message({
                                    message:'修改地址请求失败，请重新登陆',
                                    type:'error'
                                })
                                console.log("修改地址请求失败",error.message);
                            }
                        )
                    }
                }else{
                    if(this.BtnStyle.name&&this.BtnStyle.phone&&this.BtnStyle.location&&this.BtnStyle.address&&this.BtnStyle.tag){
                        this.$addr.get(`address/add_new`,{
                            params:{
                                name:this.name,
                                phone:this.phone,
                                provinceName:this.provinceName,
                                cityName:this.cityName,
                                areaName:this.areaName,
                                address:this.location+this.address,
                                tag:this.tagName
                            }
                        }).then(
                            response=>{
                                console.log('添加地址请求成功',response.data);
                                if(response.data.state==200){
                                    if(this.isDefault){
                                        this.$addr.get(`address/${response.data.data}/set_default`).then(
                                            response=>{
                                                console.log('设为默认地址请求成功',response.data);
                                                this.$router.push({name:'addressShow'})
                                                this.$notify({
                                                    title: '恭喜您',
                                                    message: '成功添加收货地址',
                                                    type: 'success'
                                                });
                                            },
                                            error=>{
                                                this.$message({
                                                    message:'设为默认地址请求失败，请重新登陆',
                                                    type:'error'
                                                })
                                                console.log("设为默认地址请求失败",error.message);
                                            }
                                        )
                                    }else{
                                        this.$router.push({name:'addressShow'})
                                        this.$notify({
                                            title: '恭喜您',
                                            message: '成功添加收货地址',
                                            type: 'success'
                                        });
                                    }
                                }
                            },
                            error=>{
                                this.$message({
                                    message:'添加地址请求失败，请重新登陆',
                                    type:'error'
                                })
                                console.log("添加地址请求失败",error.message);
                            }
                        )
                    }
                }
            }
        },
        InputFocus(index){
            this.WhichInput=index
            // console.log(this.WhichInput,index);
        },
        InputBlur(){
            this.WhichInput=99
        }
    },
    mounted(){
        this.MyDiv33Width='width:'+(window.innerWidth-30)+'px;'
        if(this.$route.params.Addressdata != null && this.$route.params.Addressdata != ''){
            this.OldAddressdata=this.$route.params.Addressdata
            this.name=this.OldAddressdata.name
            this.phone=this.OldAddressdata.phone
            this.tagName=this.OldAddressdata.tag
            switch (this.OldAddressdata.tag) {
                case '家':this.tag=0
                    break;
                case '公司':this.tag=1
                    break;
                case '学校':this.tag=2
                    break;
                default:this.tag=3
                    break;
            }
            this.isDefault=this.OldAddressdata.isDefault
            this.location=this.OldAddressdata.provinceName+this.OldAddressdata.cityName+this.OldAddressdata.areaName
            this.address=this.OldAddressdata.address.split(this.location)[1]
            this.provinceName=this.OldAddressdata.provinceName
            this.cityName=this.OldAddressdata.cityName
            this.areaName=this.OldAddressdata.areaName
        }else{
            this.OldAddressdata=0
        }

        this.$bus.$on('Chosen',(ChooseProvince,ChooseCity,ChooseArea)=>{
            this.provinceName=ChooseProvince
            this.cityName=ChooseCity
            this.areaName=ChooseArea
            this.location=ChooseProvince+ChooseCity+ChooseArea
        })
        this.phoneHeight=window.innerHeight
        window.addEventListener("resize", (value) => {
            if(this.phoneHeight == value.target.innerHeight){
                this.resizeStyle=''
            }else{
                this.resizeStyle='position: static;'
            }
        });
    },
    beforeDestroy(){
        this.$bus.$off('Chosen')
    },
    watch:{
        phone(value){
            if((Number(value)+1).toString()=='NaN'){
                this.phone=value.slice(0,value.length-1)
            }
            if(value.length > 11){
                this.phone=value.slice(0,11)
            }
            this.BtnStyle.phone=0
            if(value.length == 11){
                this.BtnStyle.phone=1
            }
        },
        name(value){
            this.BtnStyle.name=0
            if(value){
                this.BtnStyle.name=1
            }
        },
        location(value){
            this.BtnStyle.location=0
            if(value){
                this.BtnStyle.location=1
            }
        },
        address(value){
            this.BtnStyle.address=0
            if(value){
                this.BtnStyle.address=1
            }
        },
        tag(value){
            this.BtnStyle.tag=0
            if(value!=99){
                this.BtnStyle.tag=1
                switch (value) {
                    case 0:this.tagName='家'
                        break;
                    case 1:this.tagName='公司'
                        break;
                    case 2:this.tagName='学校'
                        break;
                    default:this.tagName='其他'
                        break;
                }
            }
        },
    }
}
</script>

<style scoped>
.div7{
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 8px;
    background-color: rgb(229, 210, 255);
    color: white;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
}
.div6{
    background-color: rgb(255, 255, 255);
    text-align: center;
    position: fixed;
    bottom: 0px;
    z-index: 2;
    width: 100%;
}
.img_safty{
    height: 20px;
    width: 20px;
    position: absolute;
    margin-top: 5px;
    margin-left: -23px;
}
.div5{
    margin-top: 15px;
    font-size: 10px;
    margin-left: 25px;
    margin-right: 10px;
}
.span4{
    position: fixed;
    right: 22px;
    padding: 10px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: rgb(232, 232, 232);
    border: 1px solid rgb(206, 206, 206);
}
.span3{
    position: fixed;
    right: 43px;
    padding: 10px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(206, 206, 206);
}
.img_check{
    position: absolute;
    height: 13px;
    margin-top: -1.2px;
}
.span2{
    margin-left: 15px;
    padding: 5px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    box-shadow: 0px 0px 4px 0px rgb(206, 206, 206) inset;
}
.div4{
    padding-top: 18px;
    margin-left: 15px;
    margin-right: 15px;
    padding-bottom: 18px;
}
.div3{
    margin-top: 3px;
    background-color: white;
    margin-left: 15px;
    margin-right: 15px;
}
.div33{
    margin-top: -.7px;
    position: absolute;
    margin-left: 15px;
    margin-right: 15px;
    transition: border-bottom .5s ease-in-out,width .5s ease-out;
}
.span1{
    font-size: 16px;
    padding-top: 18px;
    position: absolute;
}
.input{
    font-size: 16px;
    margin-left: 70px;
    outline: none;
    border: 0px;
    width: 210px;
    padding-top: 15px;
    padding-bottom: 15px;
    height: 30px;
    padding-left: 10px;
}
input::-webkit-input-placeholder{
  color:rgb(188, 188, 188);
}
.div2{
    margin-top: 15px;
    background-color: white;
    /*-8px以上会有松动的感觉*/ /**已经解决!! */
    /* margin-left: -8px;
    margin-right: -8px; */
    box-shadow: 0px 2.5px 5px 0.1px rgb(235, 235, 235);
}
.img_false{
    position: absolute;
    height: 15px;
    margin-top: 25px;
    margin-left: 10px;
}
.div1{
    background: linear-gradient(to right,rgb(210, 185, 255),rgb(172, 124, 255));
    color: white;
    text-align: center;
    width: 100%;
    padding-top: 23px;
    padding-bottom: 15px;
    user-select: none;
}
.img_back{
    position: fixed;
    margin-top: 28px;
    left: 14px;
    height: 18px;
}
.zhezhao{
    width: 100%;
    height: 100%;
    background-color: rgb(229, 239, 243);
    opacity: 0.4;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
</style>